<template>
	<coreshop-page title="优惠券" mode="left" showLoginModalDom>
		<view>
			<view class="content-box p-25" v-if="state.couponList.length > 0">
				<view v-for="item, index in state.couponList" :key="index" class="coupon-box">
					<view class="card-box">
						<image class="coupon-bg" :src="handleStaticResources('/static/images/coupon-bg.jpg')"></image>
						<view class="coupon-msg">
							<view class="coupon-tit">
								<view class="name">
									<text class="tit">{{ item.name }}</text>
								</view>
								<view class="time">
									<text class="tit"> 领取时间：{{ timeFormat(item.startTime, 'yyyy-mm-dd') }} 至
										{{ timeFormat(item.endTime, 'yyyy-mm-dd') }}</text>
								</view>
								<view class="rules-mode">
									<view class="use-rules" @click="handleToggleRules(index)">
										<view class="tit">优惠券使用规则</view>
										<uv-icon v-if="item.showRules" name="arrow-up-fill" color="#aaa"
											size="10"></uv-icon>
										<uv-icon v-else name="arrow-down-fill" color="#aaa" size="10"></uv-icon>
									</view>
								</view>
							</view>
							<view class="btn-box">
								<text class="btn-tit" @click="handleReceiveCoupon(item.id)">立即领取</text>
							</view>
						</view>
					</view>
					<view v-show="item.showRules">
						<view class="rules-box">
							<view class="tit">优惠券使用规则：</view>
							<view class="rules" v-for="cell, cellIndex in item.conditions" :key="cellIndex">{{ cell }}
							</view>
						</view>
						<view class="rules-box">
							<view class="tit">优惠券优惠方式：</view>
							<view class="rules" v-for="cell, cellIndex in item.results" :key="cellIndex">{{ cell }}
							</view>
						</view>
					</view>
					<view class="no-coupon" v-if="item.maxRecevieNums > 0 && item.getNumber >= item.maxRecevieNums">
						<image class="img" :src="handleStaticResources('/static/images/no-coupon.png')"></image>
					</view>
				</view>
			</view>
			<view v-else class="layout-empty-box">
				<coreshop-empty :mode="EmptyEnum.coupon" text="暂无优惠券可领取"></coreshop-empty>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive, onMounted } from 'vue';
	import { queryCouponList, queryReceiveCoupon } from '@/core/api';
	import { onReachBottom } from '@dcloudio/uni-app';
	import type { Response } from '@/core/models';
	import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	import { handleStaticResources, handleShowToast } from '@/core/utils';
	import { EmptyEnum } from '@/core/enum';
	import { useLoginStore } from '@/core/store';

	/** 登录store */
	const _useLoginStore = useLoginStore();

	const state = reactive<{
		couponList : Array<any>;
		totalPages : number;
		page : number;
		limit : number;
	}>({
		couponList: [],
		totalPages: 1,
		page: 1,
		limit: 10,
	})

	onMounted(() => {
		/** 获取优惠券列表 */
		getCouponList()
	});

	/** 获取优惠券列表 */
	const getCouponList = async () => {
		uni.showLoading({
			title: "加载中..."
		})
		const userCoupo : Response<Array<any>> = await queryCouponList({
			page: state.page,
			limit: state.limit,
		})
		state.totalPages = userCoupo.otherData?.totalPages;
		state.couponList = state.couponList.concat(userCoupo.data?.map(((item : any) => {
			item['showRules'] = false;
			return item;
		})));
		uni.hideLoading();
	}

	onReachBottom(() => {
		if (state.totalPages > state.page) {
			state.page++;
			getCouponList();
		}
	})

	/** 立即领取 */
	const handleReceiveCoupon = (id : number) => {
		_useLoginStore.checkLogin(async () => {
			uni.showLoading({
				title: '加载中',
			});
			const receiveCoupon = await queryReceiveCoupon({ id, });
			uni.hideLoading();
			if (receiveCoupon.status) {
				handleShowToast('领取成功', 'success');
			} else {
				handleShowToast(receiveCoupon.msg);
			}
		})
	}

	/** 查看使用规则 */
	const handleToggleRules = (index : number) => {
		state.couponList[index].showRules = !state.couponList[index].showRules;
	}
</script>
<style lang="scss" scoped>
	@import './coupon.scss';
</style>